<template>
    <div class="tasks__task">
        <div class="tasks__task-row" :style="{'padding-left': getIndentValue() }">
            <div class="tasks__c tasks__c--10 tasks__c--left-pad">
                <div class="tasks__indent-icon-group">
                    <div v-html="indentIcon" class="tasks__indent-icon" v-if="level > 0"></div>
                    <select :value="task.type" v-on:change="updateTask" class="inline-select">
                        <option>{{ task.type }}</option>
                        <option>Issue</option>
                        <option>Epic</option>
                    </select>
                </div>
            </div>
            <div class="tasks__c tasks__c--20">
                <InlineTextField v-model="task.title" @input="updateTask"></InlineTextField>
            </div>
            <div class="tasks__c tasks__c--20">
                <InlineTextField v-model="task.assignee" @input="updateTask"></InlineTextField>
            </div>
            <div class="tasks__c tasks__c--10">
                <select :value="task.status" v-on:change="updateTask" class="inline-select">
                    <option>{{ task.status }}</option>
                    <option>In Progress</option>
                    <option>Submitted</option>
                    <option>Complete</option>
                </select>
            </div>
            <div class="tasks__c tasks__c--10">
                <InlineDatepicker :date="task.start" input-class="inline-text-field__input"></InlineDatepicker>
            </div>
            <div class="tasks__c tasks__c--10">
                <InlineDatepicker :date="task.due" input-class="inline-text-field__input"></InlineDatepicker>

            </div>
            <div class="tasks__c tasks__c--10">
                <a href="#" v-on:click.prevent="toggleSubtasks" v-if="getSubtasks(task)" v-html="subtaskCount"></a>
            </div>
        </div>
        <subtasks v-if="subtasksExpanded" :task="task" :all-tasks="allTasks" :level="incrementLevel()"></subtasks>
    </div>
</template>
<script>
    import _ from 'lodash'
    import InlineDatepicker from './InlineDatepicker.vue'
    import InlineTextField from './InlineTextField.vue'

    export default {

        components: {
            InlineDatepicker,
            InlineTextField
        },

        props: [
            'task',
            'allTasks',
            'level'
        ],

        data() {
            return {
                subtasksExpanded: false,
                indentIcon: require('../../assets/img/corner-down-right.svg'),
            }
        },

        methods: {
            incrementLevel: function() {
                return this.level + 1;
            },

            getSubtasks: function(task) {
                var tasks = _.filter(this.allTasks, function(o) {
                    if (o.parent_task == task.id) {
                        return o;
                    }
                });
                if(tasks.length > 0) {
                    return tasks;
                } else {
                    return false;
                }
            },

            toggleSubtasks: function() {
                this.subtasksExpanded = !this.subtasksExpanded;
            },

            getIndentValue: function() {
                if(this.level > 1) {
                    return this.level * 22 + 'px';
                } else {
                    return 0;
                }
            },

            updateTask: function(val) {
                // Update Task
            }

        },

        computed: {
            subtaskCount: function() {
                return this.getSubtasks(this.task).length + ' Subtasks';
            }
        },

        created: function() {

        },

        watch: {
            subtasksExpanded: function(val) {
            }
        }
    }
</script>